<template>
	<i
		class="my_icon"
		:style="{fontSize: `${props.size/75}rem`, backgroundImage: `url(${src})`, transform: `translateY(${offsetY/75}rem) rotate(${rotate}deg)`}"
	/>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
	src: {
		type: String,
		default: '',
	},
	size: {
		type: Number,
		default: 20,
	},
	offsetY: {
		type: Number,
		default: 0,
	},
	// 旋转角度
	rotate: {
		type: Number,
		default: 0,
	},
})
</script>

<style lang="less">
.my_icon {
	position: relative;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	speak: none;
	font: 14px/1 vant-icon;
	font-size: inherit;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	&::before {
		font-size: inherit;
		color: transparent;
		display: inline-block;
		content: '替';
		visibility: hidden;
		pointer-events: none;
		user-select: none;
	}
}
</style>
